```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TRAE SOLO - 专属上下文工程师 | 字节跳动AI编程助手</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .highlight-text {
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 4.5rem;
            line-height: 0.65;
            margin: 0.1em 0.2em 0 0;
            font-weight: 700;
            color: #3b82f6;
        }
        .timeline-item::before {
            content: '';
            position: absolute;
            left: -38px;
            top: 0;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #3b82f6;
            border: 4px solid #e0e7ff;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white min-h-screen flex items-center relative overflow-hidden">
        <div class="absolute inset-0 bg-black opacity-20"></div>
        <div class="container mx-auto px-6 relative z-10 py-20">
            <div class="max-w-4xl mx-auto text-center">
                <div class="inline-block mb-4 px-4 py-2 bg-white bg-opacity-20 rounded-full backdrop-blur-sm">
                    <span class="text-sm font-medium">字节跳动AI产品</span>
                </div>
                <h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight">
                    <span class="text-white">TRAE SOLO</span>
                </h1>
                <p class="text-xl md:text-2xl font-light mb-10 max-w-2xl mx-auto leading-relaxed">
                    革命性的AI编程助手，通过全流程自动化将创意转化为现实
                </p>
                <div class="flex flex-wrap justify-center gap-4">
                    <a href="#features" class="px-8 py-4 bg-white text-indigo-600 font-semibold rounded-lg hover:bg-gray-100 transition duration-300 transform hover:scale-105">
                        探索功能 <i class="fas fa-arrow-down ml-2"></i>
                    </a>
                    <a href="https://www.trae.cn/solo" target="_blank" class="px-8 py-4 border-2 border-white text-white font-semibold rounded-lg hover:bg-white hover:bg-opacity-10 transition duration-300 transform hover:scale-105">
                        访问官网 <i class="fas fa-external-link-alt ml-2"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-slate-50 to-transparent"></div>
    </section>

    <!-- Problem Section -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <div class="max-w-4xl mx-auto text-center mb-16">
                <h2 class="text-3xl md:text-5xl font-bold mb-6">
                    <span class="highlight-text">传统开发的痛点</span>
                </h2>
                <p class="text-lg text-slate-600 leading-relaxed">
                    在传统软件开发中，开发者常常面临多重挑战，这些痛点阻碍了创意的高效实现
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto">
                <div class="bg-slate-50 p-8 rounded-xl border border-slate-200 hover:border-indigo-300 transition duration-300">
                    <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6">
                        <i class="fas fa-tasks text-indigo-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-slate-800">繁琐的任务拆解</h3>
                    <p class="text-slate-600 leading-relaxed">
                        从需求文档到具体开发任务，开发者需要手动梳理逻辑、分配工作量，耗费大量时间。
                    </p>
                </div>
                <div class="bg-slate-50 p-8 rounded-xl border border-slate-200 hover:border-indigo-300 transition duration-300">
                    <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6">
                        <i class="fas fa-random text-indigo-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-slate-800">工具切换成本高</h3>
                    <p class="text-slate-600 leading-relaxed">
                        开发过程中需要在 IDE、终端、浏览器、文档编辑器之间频繁切换，效率低下且易出错。
                    </p>
                </div>
                <div class="bg-slate-50 p-8 rounded-xl border border-slate-200 hover:border-indigo-300 transition duration-300">
                    <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6">
                        <i class="fas fa-bug text-indigo-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-slate-800">调试与优化耗时</h3>
                    <p class="text-slate-600 leading-relaxed">
                        代码错误、测试失败或部署问题常常让开发者疲于奔命，消耗大量开发时间。
                    </p>
                </div>
                <div class="bg-slate-50 p-8 rounded-xl border border-slate-200 hover:border-indigo-300 transition duration-300">
                    <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6">
                        <i class="fas fa-lock text-indigo-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-slate-800">非技术人员的高门槛</h3>
                    <p class="text-slate-600 leading-relaxed">
                        对于非技术背景的用户，如产品经理或设计师，技术门槛是阻碍他们快速验证创意的最大障碍。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Solution Hero -->
    <section class="py-16 bg-indigo-50">
        <div class="container mx-auto px-6">
            <div class="max-w-5xl mx-auto bg-white rounded-2xl shadow-lg overflow-hidden">
                <div class="md:flex">
                    <div class="md:w-1/2 p-10 flex items-center">
                        <div>
                            <h2 class="text-3xl md:text-4xl font-bold mb-6 text-slate-800">
                                TRAE SOLO 的<span class="highlight-text">革命性解决方案</span>
                            </h2>
                            <p class="text-lg text-slate-600 mb-8 leading-relaxed">
                                利用 AI 的强大能力，将需求分析、代码生成、测试验证和部署整合为一个流畅的自动化流程。
                            </p>
                            <a href="#features" class="inline-flex items-center px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition duration-300">
                                查看核心功能 <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                    <div class="md:w-1/2">
                        <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1753332595412-fef571cd-68c7-486f-abd6-7d5d2b1d3743.png" alt="TRAE SOLO 界面" class="w-full h-full object-cover">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <div class="max-w-4xl mx-auto text-center mb-16">
                <h2 class="text-3xl md:text-5xl font-bold mb-6">
                    <span class="highlight-text">核心功能</span>
                </h2>
                <p class="text-lg text-slate-600 leading-relaxed">
                    五大创新功能，覆盖从创意输入到产品部署的完整链条
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto">
                <div class="feature-card bg-white p-8 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition duration-300">
                    <div class="flex items-start mb-6">
                        <div class="bg-indigo-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-brain text-indigo-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-slate-800 pt-1">需求理解与任务拆解</h3>
                    </div>
                    <p class="text-slate-600 leading-relaxed mb-4">
                        通过自然语言、语音或上传文件输入需求，AI自动解析并生成详细的开发计划。它能识别复杂业务逻辑，将需求拆解为可执行的任务清单。
                    </p>
                    <div class="bg-slate-50 p-4 rounded-lg">
                        <p class="text-sm text-slate-600 italic">
                            <i class="fas fa-quote-left text-indigo-400 mr-2"></i>
                            输入"创建一个社交媒体数据分析仪表盘"，SOLO会生成从数据库设计到前端界面的完整开发路径。
                        </p>
                    </div>
                </div>
                
                <div class="feature-card bg-white p-8 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition duration-300">
                    <div class="flex items-start mb-6">
                        <div class="bg-indigo-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-code text-indigo-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-slate-800 pt-1">全流程代码自动化</h3>
                    </div>
                    <p class="text-slate-600 leading-relaxed mb-4">
                        生成高质量代码，覆盖前端、后端、数据库等多个开发环节。自动进行单元测试、错误修复，并优化性能，确保代码符合行业标准并适配目标平台。
                    </p>
                </div>
                
                <div class="feature-card bg-white p-8 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition duration-300">
                    <div class="flex items-start mb-6">
                        <div class="bg-indigo-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-eye text-indigo-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-slate-800 pt-1">实时工作流跟随</h3>
                    </div>
                    <p class="text-slate-600 leading-relaxed mb-4">
                        提供集成的开发环境，包含代码编辑器、终端、浏览器预览和文档视图。AI的每一步操作都会实时展示，用户可以随时介入调整，确保透明性和控制力。
                    </p>
                </div>
                
                <div class="feature-card bg-white p-8 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition duration-300">
                    <div class="flex items-start mb-6">
                        <div class="bg-indigo-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-images text-indigo-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-slate-800 pt-1">多模态输入支持</h3>
                    </div>
                    <p class="text-slate-600 leading-relaxed mb-4">
                        支持文本、语音和图像处理。设计师可以上传UI草图，SOLO会将其转化为可交互的Web页面，极大降低技术门槛。
                    </p>
                </div>
                
                <div class="md:col-span-2 feature-card bg-white p-8 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition duration-300">
                    <div class="flex items-start mb-6">
                        <div class="bg-indigo-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-rocket text-indigo-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-slate-800 pt-1">一键部署与分享</h3>
                    </div>
                    <p class="text-slate-600 leading-relaxed mb-4">
                        支持一键部署到主流平台(如Vercel、Netlify)，并生成可分享的链接。无需配置服务器或处理复杂部署流程，适合快速验证原型或发布产品。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Mermaid Diagram -->
    <section class="py-16 bg-slate-50">
        <div class="container mx-auto px-6">
            <div class="max-w-5xl mx-auto">
                <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center">
                    <span class="highlight-text">TRAE SOLO 工作流程</span>
                </h2>
                <div class="mermaid bg-white p-8 rounded-xl shadow-md">
                    graph TD
                        A[用户输入] -->|自然语言/语音/图像| B(需求解析)
                        B --> C{任务拆解}
                        C --> D[前端代码生成]
                        C --> E[后端逻辑实现]
                        C --> F[数据库设计]
                        D --> G[自动测试]
                        E --> G
                        F --> G
                        G --> H{问题检测}
                        H -->|有错误| I[自动修复]
                        H -->|无错误| J[优化代码]
                        I --> J
                        J --> K[一键部署]
                        K --> L[可分享链接]
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <div class="max-w-4xl mx-auto text-center mb-16">
                <h2 class="text-3xl md:text-5xl font-bold mb-6">
                    <span class="highlight-text">适用场景</span>
                </h2>
                <p class="text-lg text-slate-600 leading-relaxed">
                    TRAE SOLO 的灵活性使其适用于多种开发场景
                </p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
                <div class="bg-indigo-50 p-8 rounded-xl border border-indigo-100">
                    <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center mb-6 mx-auto shadow-md">
                        <i class="fas fa-user-tie text-indigo-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4 text-center text-slate-800">产品经理的快速原型开发</h3>
                    <p class="text-slate-600 leading-relaxed">
                        只需输入需求描述，AI会自动生成代码、测试功能并部署到云端，数小时内获得可交互原型，省去与开发团队的多次沟通。
                    </p>
                </div>
                
                <div class="bg-indigo-50 p-8 rounded-xl border border-indigo-100">
                    <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center mb-6 mx-auto shadow-md">
                        <i class="fas fa-users text-indigo-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4 text-center text-slate-800">小型团队的高效协作</h3>
                    <p class="text-slate-600 leading-relaxed">
                        后端工程师无需前端经验，只需描述需求，SOLO就能生成完整Web应用，团队成员通过共享链接实时查看进度，加速迭代。
                    </p>
                </div>
                
                <div class="bg-indigo-50 p-8 rounded-xl border border-indigo-100">
                    <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center mb-6 mx-auto shadow-md">
                        <i class="fas fa-paint-brush text-indigo-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4 text-center text-slate-800">非技术用户的创意实现</h3>
                    <p class="text-slate-600 leading-relaxed">
                        设计师上传UI草图并描述功能，SOLO会生成对应的HTML/CSS/JavaScript代码，让非技术用户也能快速将创意变为现实。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Advantages Section -->
    <section class="py-20 bg-slate-50">
        <div class="container mx-auto px-6">
            <div class="max-w-5xl mx-auto">
                <div class="md:flex items-center">
                    <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
                        <h2 class="text-3xl md:text-4xl font-bold mb-6">
                            <span class="highlight-text">独特优势</span>
                        </h2>
                        <p class="text-lg text-slate-600 mb-8 leading-relaxed">
                            TRAE SOLO 作为"上下文工程师"，区别于传统的AI代码补全工具
                        </p>
                        
                        <div class="space-y-6">
                            <div class="flex items-start">
                                <div class="bg-indigo-100 p-2 rounded-lg mr-4">
                                    <i class="fas fa-link text-indigo-600"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold text-lg text-slate-800 mb-1">全流程整合</h4>
                                    <p class="text-slate-600">
                                        覆盖需求分析到部署的整个开发链条，减少了工具切换的麻烦
                                    </p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="bg-indigo-100 p-2 rounded-lg mr-4">
                                    <i class="fas fa-language text-indigo-600"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold text-lg text-slate-800 mb-1">强大的中文支持</h4>
                                    <p class="text-slate-600">
                                        中文自然语言处理能力出色，界面和文档完全本地化，适合中国开发者
                                    </p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="bg-indigo-100 p-2 rounded-lg mr-4">
                                    <i class="fas fa-comment-alt text-indigo-600"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold text-lg text-slate-800 mb-1">多模态交互</h4>
                                    <p class="text-slate-600">
                                        支持文本、语音、图像输入，设计师和产品经理也能轻松上手
                                    </p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="bg-indigo-100 p-2 rounded-lg mr-4">
                                    <i class="fas fa-sliders-h text-indigo-600"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold text-lg text-slate-800 mb-1">透明的工作流</h4>
                                    <p class="text-slate-600">
                                        实时展示AI的操作步骤，用户可以随时干预或调整
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="md:w-1/2 bg-white p-8 rounded-xl shadow-lg border border-slate-200">
                        <h3 class="text-xl font-bold mb-6 text-slate-800">局限性说明</h3>
                        <div class="space-y-4">
                            <div class="p-4 bg-red-50 rounded-lg border border-red-100">
                                <div class="flex items-start">
                                    <div class="bg-red-100 p-2 rounded-lg mr-3">
                                        <i class="fas fa-exclamation-circle text-red-600"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-slate-800 mb-1">访问门槛较高</h4>
                                        <p class="text-slate-600 text-sm">
                                            目前仅限TRAE国际版Pro用户使用，且需邀请码
                                        </p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="p-4 bg-yellow-50 rounded-lg border border-yellow-100">
                                <div class="flex items-start">
                                    <div class="bg-yellow-100 p-2 rounded-lg mr-3">
                                        <i class="fas fa-info-circle text-yellow-600"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-slate-800 mb-1">复杂业务逻辑</h4>
                                        <p class="text-slate-600 text-sm">
                                            在处理极复杂业务逻辑时可能需要人工优化，适合快速原型而非大型企业级应用
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-8">
                            <h4 class="font-bold text-slate-800 mb-3">适用性建议</h4>
                            <div class="relative">
                                <div class="absolute left-0 top-0 h-full w-1 bg-indigo-600 rounded-full"></div>
                                <div class="ml-6">
                                    <p class="text-slate-600 mb-4 pl-4">
                                        <span class="font-semibold">最佳场景：</span>快速原型开发、小型项目、创意验证、个人项目
                                    </p>
                                    <p class="text-slate-600 pl-4">
                                        <span class="font-semibold">不太适合：</span>大型企业级应用、高安全性要求的系统、极端性能优化场景
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Pricing Section -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <div class="max-w-4xl mx-auto text-center mb-16">
                <h2 class="text-3xl md:text-5xl font-bold mb-6">
                    <span class="highlight-text">使用门槛与成本</span>
                </h2>
                <p class="text-lg text-slate-600 leading-relaxed">
                    TRAE SOLO 的访问方式和定价方案
                </p>
            </div>
            
            <div class="max-w-3xl mx-auto">
                <div class="bg-slate-50 rounded-xl p-10 border border-slate-200 mb-10">
                    <h3 class="text-2xl font-bold mb-6 text-slate-800">获取 TRAE SOLO</h3>
                    
                    <div class="relative">
                        <div class="absolute left-5 top-0 h-full w-0.5 bg-slate-200"></div>
                        <div class="space-y-8">
                            <div class="relative pl-16">
                                <div class="absolute left-0 top-1 flex items-center justify-center w-10 h-10 rounded-full bg-indigo-600 text-white">
                                    1
                                </div>
                                <h4 class="text-lg font-bold text-slate-800 mb-2">注册账户</h4>
                                <p class="text-slate-600">
                                    访问 <a href="https://www.trae.ai" class="text-indigo-600 hover:underline">trae.ai</a> 注册TRAE国际版账户并订阅Pro套餐
                                </p>
                            </div>
                            
                            <div class="relative pl-16">
                                <div class="absolute left-0 top-1 flex items-center justify-center w-10 h-10 rounded-full bg-indigo-600 text-white">
                                    2
                                </div>
                                <h4 class="text-lg font-bold text-slate-800 mb-2">获取SOLO Code</h4>
                                <p class="text-slate-600">
                                    通过TRAE官方社交媒体(如X或微信公众号)申请邀请码，或加入社区获取
                                </p>
                            </div>
                            
                            <div class="relative pl-16">
                                <div class="absolute left-0 top-1 flex items-center justify-center w-10 h-10 rounded-full bg-indigo-600 text-white">
                                    3
                                </div>
                                <h4 class="text-lg font-bold text-slate-800 mb-2">安装IDE</h4>
                                <p class="text-slate-600">
                                    下载TRAE IDE(支持Windows、Mac、Linux)，登录账户并激活SOLO模式
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="grid md:grid-cols-2 gap-8">
                    <div class="bg-white p-8 rounded-xl border border-slate-200 shadow-sm">
                        <h3 class="text-2xl font-bold mb-6 text-slate-800">国际版</h3>
                        <div class="flex items-end mb-6">
                            <span class="text-4xl font-bold text-indigo-600">$3</span>
                            <span class="text-slate-500 ml-2">首月 / 后续 $10/月</span>
                        </div>
                        <ul class="space-y-3 text-slate-600 mb-8">
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span>包含SOLO模式和TRAE IDE的完整功能</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span>需要邀请码解锁SOLO权限</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span>支持Windows、Mac、Linux</span>
                            </li>
                        </ul>
                        <a href="https://www.trae.ai" class="block w-full text-center px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition duration-300">
                            立即注册
                        </a>
                    </div>
                    
                    <div class="bg-white p-8 rounded-xl border border-slate-200 shadow-sm">
                        <h3 class="text-2xl font-bold mb-6 text-slate-800">中国版</h3>
                        <div class="flex items-end mb-6">
                            <span class="text-4xl font-bold text-slate-400">等待中</span>
                        </div>
                        <ul class="space-y-3 text-slate-600 mb-8">
                            <li class="flex items-start">
                                <i class="fas fa-info-circle text-indigo-500 mt-1 mr-2"></i>
                                <span>需申请加入等待名单</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-info-circle text-indigo-500 mt-1 mr-2"></i>
                                <span>暂无公开测试计划</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-info-circle text-indigo-500 mt-1 mr-2"></i>
                                <span>需关注官方渠道获取最新信息</span>
                            </li>
                        </ul>
                        <button class="w-full px-6 py-3 bg-slate-100 text-slate-500 font-medium rounded-lg cursor-not-allowed">
                            敬请期待
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Final CTA -->
    <section class="py-20 hero-gradient text-white">
        <div class="container mx-auto px-6">
            <div class="max-w-4xl mx-auto text-center">
                <h2 class="text-3xl md:text-5xl font-bold mb-6">
                    准备好体验<span class="text-white">革命性的开发方式</span>了吗？
                </h2>
                <p class="text-xl mb-10 max-w-2xl mx-auto leading-relaxed">
                    TRAE SOLO 将彻底改变你的开发流程，让创意实现变得前所未有的简单高效
                </p>
                <div class="flex flex-wrap justify-center gap-4">
                    <a href="https://www.trae.cn/solo" target="_blank" class="px-8 py-4 bg-white text-indigo-600 font-semibold rounded-lg hover:bg-gray-100 transition duration-300 transform hover:scale-105">
                        立即访问官网 <i class="fas fa-external-link-alt ml-2"></i>
                    </a>
                    <a href="#" class="px-8 py-4 border-2 border-white text-white font-semibold rounded-lg hover:bg-white hover:bg-opacity-10 transition duration-300 transform hover:scale-105">
                        了解更多功能 <i class="fas fa-book-open ml-2"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
        
        // 卡片悬停效果
        const featureCards = document.querySelectorAll('.feature-card');
        featureCards.forEach(card => {
            card.addEventListener('mouseenter', () => {
                card.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
            });
        });
    </script>
</body>
</html>
```